<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ANOYI-IM 2.0 | Spring Boot 2.X | WebSocket 即时通信</title>
    <meta name="description" content="ANOYI-IM 2.0 | Spring Boot 2.X | WebSocket 即时通信 | 轻量级微服务架构">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/slick-carousel/1.7.1/slick.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--Theme custom css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!--Theme Responsive css-->
    <link rel="stylesheet" href="assets/css/responsive.css"/>

</head>
<body data-spy="scroll" data-target=".navbar-collapse">

<div class='preloader'>
    <div class='loaded'>&nbsp;</div>
</div>
<div class="culmn">
    <header id="main_menu" class="header navbar-fixed-top">
        <div class="main_menu_bg">
            <div class="container">
                <div class="row">
                    <div class="nave_menu">
                        <nav class="navbar navbar-default">
                            <div class="container-fluid">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#home">
                                        <img src="https://upload-images.jianshu.io/upload_images/3424642-960b72fe4be83fd6.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240" height="48" />
                                    </a>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->

                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a href="#home" style="font-size: 1rem">首页</a></li>
                                        <li><a href="#webflux" style="font-size: 1rem">项目简介</a></li>
                                        <li><a href="#study" style="font-size: 1rem">相关文章</a></li>
                                        <li><a href="#pricing" style="font-size: 1rem">开源代码</a></li>
                                        <li><a href="#contact" style="font-size: 1rem">联系我们</a></li>
                                        <li th:unless="${#httpServletRequest.remoteUser}"><a href="/login" style="font-size: 1rem" >登录/注册</a>
                                        </li>
                                        <li th:if="${#httpServletRequest.remoteUser}"><a href="/logout"
                                                                                         style="color: #e74c3c; font-size: 1rem">注销登录</a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!--home Section -->
    <section id="home" class="home">
        <div class="overlay">
            <div class="home_skew_border">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <div class="main_home_slider text-center">
                                <div class="single_home_slider">
                                    <div class="main_home wow fadeInUp" data-wow-duration="700ms">
                                        <h1>ANOYI-IM 2.0</h1>
                                        <div class="separator"></div>
                                        <p>ANOYI-IM 2.0 是基于 Spring Boot 2.0 框架开发的 WEB
                                            在线即时通信应用。支持点对点通信、群通信、系统群发消息等多种方式。快来体验吧！</p>
                                        <div class="home_btn">
                                            <a href="/chat" class="btn btn-lg m_t_10">立即体验</a>
                                            <a href="#pricing" class="btn btn-default">开源代码</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="single_home_slider">
                                    <div class="main_home wow fadeInUp" data-wow-duration="700ms">
                                        <h1>轻量级微服务架构</h1>
                                        <div class="separator"></div>
                                        <p>基于 Docker Swarm、Registrator、Consul、Spring Session等优秀框架，结合自研的WebSocket Session共享方案，支持动态平滑扩容，实现大规模用户同时在线。</p>
                                        <div class="home_btn">
                                            <a href="/chat" class="btn btn-lg m_t_10">立即体验</a>
                                            <a href="https://www.jianshu.com/p/3a6f1428de39"
                                               class="btn btn-default">架构图</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrooldown">
                    <a href="#feature"><i class="glyphicon glyphicon-chevron-down"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!--feature section -->
    <section id="feature" class="feature sections">
        <div class="container">
            <div class="row">
                <div class="main_feature text-center">

                    <div class="col-sm-3">
                        <div class="single_feature">
                            <div class="single_feature_icon">
                                <i class="glyphicon glyphicon-leaf"></i>
                            </div>
                            <p style="font-size: 1.2rem; font-weight: bold">Spring Boot 2.X</p>
                            <div class="separator3"></div>
                            <p>简洁、优雅的企业级后端开发框架。</p>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="single_feature">
                            <div class="single_feature_icon">
                                <i class="glyphicon glyphicon-unchecked"></i>
                            </div>
                            <p style="font-size: 1.2rem; font-weight: bold">Vue 2.x</p>
                            <div class="separator3"></div>
                            <p>一套构建用户界面的渐进式框架。</p>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="single_feature">
                            <div class="single_feature_icon">
                                <i class="glyphicon glyphicon-cloud"></i>
                            </div>
                            <p style="font-size: 1.2rem; font-weight: bold">Docker</p>
                            <div class="separator3"></div>
                            <p>所有组件容器化，支持 Docker 快速启动。</p>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="single_feature">
                            <div class="single_feature_icon">
                                <i class="glyphicon glyphicon-globe"></i>
                            </div>
                            <p style="font-size: 1.2rem; font-weight: bold">Cluster</p>
                            <div class="separator3"></div>
                            <p>支持集群，实现大规模用户同时在线。</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <hr/>


    <!-- WebFlux section -->
    <section id="webflux" class="history sections">
        <div class="container">
            <div class="row">
                <div class="main_history">
                    <div class="col-sm-6">
                        <div class="single_history_img">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-7b752a6fcfe81737.png?imageMogr2/auto-orient/" alt="" />
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="single_history_content">
                            <div class="head_title" style="margin-bottom: 40px">
                                <h2>项目简介</h2>
                            </div>
                            <p>
                                WebSocket 应用场景非常广泛，例如社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、实时定位、在线教育、智能家居等，这些场景都与我们的生活息息相关。
                            </p>

                            <p>
                                ANOYI-IM 2.0 使用 Spring Framework 中的 WebSocket 模块，基于 STOMP 协议实现点对点、点对多、多对多通信等功能，并应用容器化技术加强容器编排的能力。
                            </p>

                            <a href="https://www.jianshu.com/p/3a6f1428de39" class="btn btn-lg" target="_blank">查看原文</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Study Section -->
    <section id="study" class="study text-center wow fadeIn" data-wow-duration="2s" data-wow-dealy="1.5s">
        <div class="container">
            <div class="row">
                <div class="main_study_area sections">
                    <div class="head_title text-center">
                        <h2>相关文章</h2>
                        <div class="subtitle">
                            Spring Boot、Spring Security、Spring Session、WebSocket、Reactive MongoDB、Docker、Consul, etc.
                        </div>
                        <div class="separator"></div>
                    </div>
                    <div class="single_study_content">
                        <div class="col-sm-6">
                            <div class="single_study_slid_area">
                                <div class="single_study_text">
                                    <div class="study_slider">
                                        <div class="item" th:each="article:${articles}">
                                            <div class="s_study_icon">
                                                <i class="glyphicon glyphicon-tags"></i>
                                            </div>
                                            <h4 th:text="${article.TITLE}"></h4>
                                            <div class="separator3"></div>
                                            <p>采集于作者简书文章</p>
                                            <p th:text="${article.TIME}"></p>
                                            <a th:href="${article.URL}" class="btn btn-lg"
                                               target="_blank">查看全文</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="single_study_right_img">
                            <div class="col-sm-6">
                                <div class="single_study_img">
                                    <img src="http://upload-images.jianshu.io/upload_images/3424642-19c2c29813fd5798.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="opacity:0.6;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="pricing">
        <div class="container">
            <div class="row">
                <div class="main_pricing_area sections">
                    <div class="head_title text-center">
                        <h2>获取源码</h2>
                        <div class="subtitle">
                            付费代码托管在<a href="http://gitee.com" style="color: #e54d42">码云</a>私有仓库，如有需求请通过网站下方的联系方式联系作者。
                        </div>
                        <div class="separator"></div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="single_pricing">
                            <div class="pricing_head">
                                <h3>开源版</h3>
                                <div class="pricing_price">
                                    <div class="p_r text-center">￥0</div>
                                    <div class="m_t text-center">永久</div>
                                </div>
                            </div>

                            <div class="pricing_body">
                                <ul>
                                    <li>Spring Boot 1.5.X</li>
                                    <li>简单功能</li>
                                    <li>入门级体验</li>
                                </ul>
                                <a href="https://github.com/ChinaSilence/any-chat" class="btn btn-md">免费获取</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="single_pricing pricing_business">
                            <div class="pricing_head ">
                                <h3>单机版</h3>
                                <div class="pricing_price">
                                    <div class="p_r text-center">￥19</div>
                                    <div class="m_t text-center">在线答疑</div>
                                </div>
                            </div>

                            <div class="pricing_body">
                                <ul>
                                    <li>Spring Boot 2.0.0 M7</li>
                                    <li>完整的开发文档及代码注释</li>
                                    <li>定制解决业务需求</li>
                                </ul>
                                <a href="#contact" class="btn btn-md">付费获取</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="single_pricing pricing_business">
                            <div class="pricing_head">
                                <h3>集群版</h3>
                                <div class="pricing_price">
                                    <div class="p_r text-center">￥99</div>
                                    <div class="m_t text-center">视频答疑</div>
                                </div>
                            </div>

                            <div class="pricing_body">
                                <ul>
                                    <li>DevOps基础设施平台</li>
                                    <li>全面容器化部署</li>
                                    <li>平滑伸缩、无缝升级</li>
                                </ul>
                                <a href="#contact" class="btn btn-md">付费获取</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="contact_contant sections">
                        <div class="head_title text-center">
                            <h2>联系我们</h2>
                            <div class="subtitle">
                                如果您对此开源项目感兴趣，可以通过以下方式联系我们！
                            </div>
                            <div class="separator"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="main_contact_info">
                                    <div class="row">
                                        <div class="contact_info_content padding-top-90 padding-bottom-60 p_l_r">
                                            <div class="col-sm-12">
                                                <div class="single_contact_info">
                                                    <div class="single_info_text">
                                                        <h3>邮箱</h3>
                                                        <h4>545544032@qq.com</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="single_contact_info">
                                                    <div class="single_info_text">
                                                        <h3>QQ群</h3>
                                                        <h4>481678152【限程序员】</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="single_contact_info">
                                                    <div class="single_info_text">
                                                        <h3>微信</h3>
                                                        <p style="font-size: 1.286rem;">VIPshaohan</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="single_contant_left padding-top-90 padding-bottom-90">
                                    <form onsubmit="return submitMessage()" id="formid">
                                        <div class="col-lg-8 col-md-8 col-sm-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1">

                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="name"
                                                               placeholder="姓名" required="" id="user-name">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="wechat"
                                                               placeholder="微信" required="" id="user-email">
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="form-group">
                                                <textarea class="form-control" name="message" rows="7" placeholder="内容"
                                                          id="user-content"></textarea>
                                            </div>

                                            <div class="">
                                                <input type="submit" value="发送留言[实时]" class="btn btn-lg">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- End of contact section -->

    <!--Footer section-->
    <section class="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="main_footer">
                        <div class="row">
                            <div class="col-sm-6 col-xs-12">
                            </div>

                            <div class="col-sm-6 col-xs-12">
                                <div class="copyright_text">
                                    <p class=" wow fadeInRight" data-wow-duration="1s">Copyright &copy; 2017. All rights
                                        reserved.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

<!-- START SCROLL TO TOP  -->

<div class="scrollup">
    <a href="#"><i class="glyphicon glyphicon-triangle-top"></i></a>
</div>

<script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdn.bootcss.com/mixitup/2.1.11/jquery.mixitup.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.bootcss.com/masonry/4.2.0/masonry.pkgd.min.js"></script>

<!--slick slide js -->
<script src="https://cdn.bootcss.com/slick-carousel/1.7.1/slick.min.js"></script>

<script src="assets/js/main.js"></script>

<script>

    /**
     * 用户提交留言
     */
    function submitMessage() {
        $.post("/api/common/message",{
            nickname:$('#user-name').val(),
            email:$('#user-email').val(),
            content:$('#user-content').val()
        },function(response){
            if (response.code ===  0){
                $('#user-name').val('');
                $('#user-email').val('');
                $('#user-content').val('');
                alert("发送成功，随后会回复您！");
            }else {
                alert("发送失败，请用其他方式联系我们！");
            }
        });
        return false;
    }

</script>
</body>